<template>
  <div>
    <el-dialog
      title="工单详情"
      :visible="showDetail"
      width="30%"
      @close="close"
    >
      <div v-if="true" style="" class="status_box">
        <span class="icon_left">
          <i class="el-icon-alarm-clock" style="font-size: 24px; color: #fff;" />
        </span>
        <span style="margin-left: 15px;">代办</span>
        <img style="margin-left: 300px;" src="https://likede2-admin.itheima.net/img/pic_1.834b274c.png" alt="">
      </div>
      <div v-else style="" class="status_box">
        <i class="el-icon-warning" style="font-size: 30px; " />
        <span style="margin-left: 15px;">取消</span>
        <img style="margin-left: 300px;" src="https://likede2-admin.itheima.net/img/pic_3.e8208e34.png" alt="">
      </div>
      <div style="margin-bottom: 15px;">
        <el-row>
          <el-col :span="12"><span>设备编号：</span><span>01000023</span></el-col>
          <el-col :span="12"><span>创建日期：</span><span>2023.05.16 03:00:01</span></el-col>
        </el-row>
        <el-row>
          <el-col :span="12"><span>运营人员：</span><span>运营刘俊杰</span></el-col>
          <el-col :span="12"><span>工单类型：</span><span>补货工单</span></el-col>
        </el-row>
        <el-row>
          <el-col :span="12"><span>补货数量：</span><span style="color: #496ee7;" @click="$emit('update:showReplment',true)">补货详情</span></el-col>
          <el-col :span="12"><span>工单方式：</span><span>自动</span></el-col>
        </el-row>
        <el-row>
          <el-col :span="12"><span>备注：</span><span>自动补货工单</span></el-col>
        </el-row>
      </div>
      <div class="form_btn">
        <el-button @click="close">取消工单</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: '',
  props: {
    showDetail: {
      type: Boolean
    },
    showReplment: {
      type: Boolean
    }
  },
  data() {
    return {

    }
  },
  computed: {
  },
  created() {
  },
  methods: {
    close() {
      this.$emit('update:showDetail', false)
    }
  }
}
</script>
<style lang='scss'  scoped>

.form_btn{
  display: flex;
  justify-content: center;
  .el-button{
    background-color:  #fbf4f0;
    border: 1px solid  #fbf4f0;
  }

}
  .el-row{
    margin-bottom: 15px;
    span{
      margin-left: 20px;
    }
  }
.status_box{
  height: 50px;
  display: flex;
  align-items: center;
  background-color: #f8f8f8;
  padding: 15px;
  margin-bottom: 20px;
}
.icon_left{
  display: inline-block;
  width: 35px;
  height: 35px;
  background-color: #ff665f;
  border-radius: 50%;
  text-align: center;
  line-height: 45px;
}
</style>
